<template>
  <div class="journal-box">
    <!-- 工作日志 -->
    <div class="module-box">
      <div class="box-head">
        <div class="bg-title">
          <div style="padding-left: 29px; margin-top: -5px">工作日志</div>
        </div>
        <div class="img-box">
          <img v-for="item in imgList" :key="item.id" :src="item" alt="" />
        </div>
      </div>
      <div class="tab-box">
        <div
          v-for="(item, index) in tabList"
          :key="item.id"
          :class="{ 'tab-active': tabActiveValue === index }"
          class="tab-li"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="title-name">
        <div class="title-left">
          <span class="name">{{ demandData.name }}</span>
        </div>
        <div>
          <span class="look-more">查看更多</span>
          <img src="@/assets/right_img.png" class="look-img" alt="" />
        </div>
      </div>
      <div class="upload-time">由xxxx于2024年10月22日创建</div>
      <div class="upload-time mg-time">由xxxx于2024年10月22日最后更新</div>
      <div class="line"></div>
      <div class="select-box select-box-width">
        <div class="select-li">
          <span class="screen-name">届时所处进度：</span>
          <el-select
            v-model="demandData.businessValue"
            placeholder="请选择"
            style="width: 130px; margin-left: 10px"
          >
            <el-option
              v-for="item in businessOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-li mgl20">
          <span class="screen-name">届时所处业务环节：</span>
          <el-select
            v-model="demandData.taskValue"
            placeholder="请选择"
            style="width: 90px"
          >
            <el-option
              v-for="item in taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="briefing mgl20">
        <span class="select-name">日志简报：</span>
        <el-input
          type="textarea"
          class="textarea"
          placeholder=""
          v-model="textareaBriefing"
        >
        </el-input>
      </div>
      <div class="upload-box">
        <span class="select-name pl49">佐证材料：</span>
        <el-upload
          class="upload-demo"
          :file-list="fileList"
          action=""
          list-type="picture"
        >
          <div class="upload-btn">+</div>
        </el-upload>
      </div>
      <div class="img-list pl133">
        <img
          v-if="leftImgState(materialList.length)"
          src="@/assets/left_img.png"
          alt=""
          class="operation-img"
        />
        <div class="img-li">
          <!-- :class="{activeImg:index===1}" -->
          <img v-for="it in materialList" :key="it.id" :src="it.img" alt="" />
        </div>
        <img
          v-if="rightImgState(materialList.length)"
          src="@/assets/right_img.png"
          alt=""
          class="operation-img"
        />
      </div>
    </div>
    <!-- 预警处理 -->
    <div class="module-box module-top">
      <div class="box-head">
        <div class="bg-title">
          <div style="padding-left: 29px; margin-top: -5px">预警处理</div>
        </div>
        <div class="img-box">
          <img v-for="item in imgList" :key="item.id" :src="item" alt="" />
        </div>
      </div>
      <div class="title-name">
        <div class="select-li">
          <span class="screen-name">作业开始时间：</span>
          <el-select
            v-model="demandData.businessValue"
            placeholder="请选择"
            style="width: 130px"
          >
            <el-option
              v-for="item in businessOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-li mgl20">
          <span class="screen-name">作业结束时间：</span>
          <el-select
            v-model="demandData.taskValue"
            placeholder="请选择"
            style="width: 90px"
          >
            <!-- <template slot="suffix">
              <img src="@/assets/right_img.png" class="look-img" alt="" />
            </template> -->
            <el-option
              v-for="item in taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="look-more">查看更多</span>
          <img src="@/assets/right_img.png" class="look-img" alt="" />
        </div>
      </div>
      <div class="tips tips-pad">
        {{ demandData.tips }}
      </div>
      <div class="line"></div>
      <div class="demand-table warning-table">
        <el-table :data="warningData" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.index }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预警类别" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预警内容" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预警级别" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.grade }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span>{{ scope.row.option }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="my-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="10"
          :pager-count="5"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, prev, pager, next, jumper"
          :total="1000"
        >
          <template slot="prev">共 {{ 5 }} 页</template>
        </el-pagination>
        <div class="toal-num">共10页</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "journalBox",
  components: {},
  data() {
    return {
      textareaBriefing: "", // 日志简报
      materialList: [
        { img: require("@/assets/1.png") },
        { img: require("@/assets/2.png") },
      ], // 佐证材料
      tabActiveValue: 0,
      tabList: [
        { name: "共享业务1" },
        { name: "共享业务2" },
        { name: "共享业务3" },
      ],
      taskOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
      businessOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
      demandData: {
        name: "客户名称+共享业务类别+提报时间",
        tieleType: "自定义业务标题",
        businessValue: "1", // 业务类型值
        taskValue: "1", // 业务类型值
        tips: "汇总数据：搭挂杆塔数量共计NN基，杆程共计NN公里，光缆数量共计NN条，皮长共计NN公里，总金额共计NNNNNNN元，租赁期间共计N年。",
      },
      imgList: [
        require("@/assets/icon_rome.png"),
        require("@/assets/icon_big.png"),
        require("@/assets/icon_open.png"),
        require("@/assets/icon_close.png"),
      ],
      currentPage: 1,
      warningData: [
        {
          index: "山东",
          type: "线路名称",
          content: "电压等级",
          grade: "所属区域",
          state: "所属分支",
          startTime: "搭挂杆",
          option: "杆塔（公里）",
        },
        {
          index: "山东",
          type: "线路名称",
          content: "电压等级",
          grade: "所属区域",
          state: "所属分支",
          startTime: "搭挂杆",
          option: "杆塔（公里）",
        },
      ], //预警table
      fileList: [], // 上传资料list
    };
  },
  methods: {
    leftImgState(value) {
      if (value === 0) {
        return false;
      } else {
        return true;
      }

      // 还需要有判断第几页需要有左右按钮逻辑
    },
    rightImgState(value) {
      if (value === 0 || value <= 3) {
        return false;
      } else {
        return true;
      }
      // 还需要有判断第几页需要有左右按钮逻辑
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
